<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>实时数据</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link rel="shortcut icon" href="favicon.ico">
	<link href="__STATIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="__STATIC__/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<!-- jqgrid-->
	<link href="__STATIC__/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
	<link href="__STATIC__/css/animate.css" rel="stylesheet">
	<link href="__STATIC__/css/style.css?v=4.1.0" rel="stylesheet">
	<link href="__STATIC__/css/tool.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
	<div class="row">
		<div class="col-sm-12">

			<div class="ibox ">
				<div class="ibox-title">
					<h4>实时数据</h4>
				</div>
				<div class="ibox-title" style=" text-align:center">
					<h5>刷新时间：<span id="datetime"></span></h5>
				</div>
				<div class="toogl_body">
					<div class="jqGrid_wrapper">
						<table id="table_list_1"></table>
						<div id="pager_list_1"></div>
					</div>
				</div>
				<div class="toogl_body">
					<div class="jqGrid_wrapper">
						<table id="table_list_2"></table>
						<div id="pager_list_2"></div>
					</div>
				</div>
				<div class="toogl_body">
					<div class="jqGrid_wrapper">
						<table id="table_list_3"></table>
						<div id="pager_list_3"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 全局js -->
<!--手机导航-->
<div class="to-fdh" style="display: none;">
	<img class="to-imgd" src="__STATIC__/img/phonedh.jpg">
	<div class="mob-nrlb">
		<ul>
			<li>
				<a class="mob-nrdh">管理</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('Player/gameplayer')}">玩家管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('system/notice')}">公告管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('email/mail')}">邮件管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Club/club')}">亲友圈管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Money/money')}">提现管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Order/order')}">订单管理</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="mob-nrdh">数据</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('data/datagk')}">概況</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datawf')}">玩法</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datalc')}">留存</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datass')}">实时数据</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/dataczfx')}">充值分析</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/dataclub')}">亲友圈统计</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/president')}">高级会长</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/regionaldata')}">地区数据</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="mob-nrdh mob-qbh">权限</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('rule/rule_list')}">权限管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('rule/rule_group')}">用户组管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('account/account_details')}">后台账号管理</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<div id="zkbg">
	<img src="__STATIC__/img/dp.gif">
</div>
<div class="vnl-zz" style="display:none">
	<div><img src="__STATIC__/img/bqhp.gif"></div>
</div>
<!--手机适配-->
<script src="__STATIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__STATIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__STATIC__/js/plugins/peity/jquery.peity.min.js"></script>
<script src="__STATIC__/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="__STATIC__/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
<script src="__STATIC__/js/content.js?v=1.0.0"></script>
<script src="__STATIC__/js/plugins/laydate/laydate.js"></script>
<script src="__STATIC__/js/echarts.min.js"></script>
<script src="__STATIC__/js/echarts.common.min.js"></script>
<script>
    //手机适配
    $(function(){
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            $("head").append("<link>");
            var css = $("head").children(":last");
            css.attr({
                rel:  "stylesheet",
                type: "text/css",
                href: "__STATIC__/css/phone_sp.css"
            });
            var mql = window.matchMedia("(orientation: portrait)");
            if(mql.matches) { //竖屏样式
                $(".vnl-zz").show();
                $(".to-fdh").hide();
            }else{
                $(".to-fdh").show();
                $("html").width("100%");
                $("body").width("100%");
            }
            mql.addListener(function(m) {
                if(m.matches) {
                    // 改变到直立方向
                    $(".vnl-zz").show();
                    $(".to-fdh").hide();
                }
                else {
                    $(".to-fdh").show();
                    $(".vnl-zz").hide();
                    $("html").width("100%");
                    $("body").width("100%");
                }
            });
        }
    });
    //导航显示展开
    $(".mob-nrdh").click(function(){
        $(this).next().toggle(".mob-nryc");
    });
    $(".to-imgd").click(function(){
        $(this).next().toggle(".mob-nrlb");
    });
    //手机适配end
    // day_active_user 日活
    // finish_room_num 关桌数
    // finish_table_num 关局数
    // recharge_amount 充值金额
    // online_user 在线用户
    // datetime 实时数据时间
    // start_table_num 开局数
    // recharge_user 充值用户数
    // day_added_user 新增
    // start_room_num 开桌数
    //table
    var mydata =[];
    var mydatas =[];
    var mdata=[];
    $(function() {

        $.ajax({
            url: '__URL__/real_time_data',
            data: {
            },
            dataType: "json",
            type: "post",
            success: function(e) {
                $("#table_list_1").jqGrid("clearGridData");
                for(i  in e.real_time_data ){
                    $("#datetime").html(e.real_time_data[i].datetime);
                    // datetime: e.real_time_data[i].datetime, //时间
                    mydata = {

                        day_active_user: e.real_time_data[i].day_active_user,
                        day_added_user: e.real_time_data[i].day_added_user,
                        online_user: e.real_time_data[i].online_user,
                        start_room_num: e.real_time_data[i].start_room_num,
                        finish_room_num: e.real_time_data[i].finish_room_num,
                        added_user_room_num: e.real_time_data[i].added_user_room_num,
                        recharge_user: e.real_time_data[i].recharge_user,
                        recharge_amount: e.real_time_data[i].recharge_amount,
                        recharge_gold_amount: e.real_time_data[i].recharge_gold_amount,
                        recharge_diamond_amount: e.real_time_data[i].recharge_diamond_amount,
                        recharge_user_card_amount: e.real_time_data[i].recharge_user_card_amount,
                        recharge_club_card_amount: e.real_time_data[i].recharge_club_card_amount,
                    };

                    $("#table_list_1").addRowData(i, mydata, "last");
                }
                $("#table_list_2").jqGrid("clearGridData");
                for(i  in e.region_detail ){
                    // region_id 区域id
                    // day_active_user 区域日活
                    // start_room_num 区域开桌数
                    // finish_room_num 区域完成桌数
                    // added_club_num 新增亲友圈数
                    // reduce_pay_gold_num 充值蓝钻消耗数
                    // reduce_free_gold_num 赠送蓝钻消耗数
                    // club_recharge_card_amount 会长买卡金额
                    mydatas = {
                        area_name: e.region_detail[i].area_name,
                        day_active_user: e.region_detail[i].day_active_user,
                        start_room_num: e.region_detail[i].start_room_num,
                        finish_room_num: e.region_detail[i].finish_room_num,
                        added_club_num: e.region_detail[i].added_club_num,
                        reduce_pay_gold_num: e.region_detail[i].reduce_pay_gold_num,
                        reduce_free_gold_num: e.region_detail[i].reduce_free_gold_num,
                        club_recharge_card_amount: e.region_detail[i].club_recharge_card_amount,
                        club_recharge_diamond_amount: e.region_detail[i].club_recharge_diamond_amount,
                    };

                    $("#table_list_2").addRowData(i, mydatas, "last");
                }
                $("#table_list_3").jqGrid("clearGridData");
                for(i  in e.room_type_details ){
                    // room_type_id 玩法id
                    // valid_active_user 玩法参与人数
                    // start_room_num 玩法开桌数
                    // finish_room_num 玩法完成桌数
                    // reduce_pay_gold_num 充值蓝钻消耗数
                    // reduce_free_gold_num 赠送蓝钻消耗数

                    mdata = {
                        play_name: e.room_type_details[i].play_name,
                        valid_active_user : e.room_type_details[i].valid_active_user ,
                        start_room_num : e.room_type_details[i].start_room_num ,
                        finish_room_num: e.room_type_details[i].finish_room_num,
                        reduce_pay_gold_num: e.room_type_details[i].reduce_pay_gold_num,
                        reduce_free_gold_num: e.room_type_details[i].reduce_free_gold_num,
                        reduce_diamond_num: e.room_type_details[i].reduce_diamond_num,

                    };

                    $("#table_list_3").addRowData(i, mdata, "last");
                }
                var myChart = echarts.init(document.getElementById("box"));
            },
            error: function(e) {
            }
        });
    });

    $(document).ready(function() {
        $.jgrid.defaults.styleUI = 'Bootstrap';
        $("#table_list_1").jqGrid({
            // url:'__URL__/real_time_data',
            // postData:{},
            // datatype: "json",
            data: mydata,
            datatype: "local",
            mtype: 'POST',
            height: 100,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [10, 25, 50, 100],
            colNames: ['日活','新增','在线人数','开桌数', '完成桌数','新增桌数','充值人数','充值金额','购买蓝钻金额','购买黄钻金额','用户购卡金额','会长购卡金额'],
            colModel: [
            //     {
            //     name: 'datetime',
            //     index: 'datetime',
            //     width: 100,
            // },
                {
                    name: 'day_active_user',
                    index: 'day_active_user',
                    width: 100,
                },
                {
                    name: 'day_added_user',
                    index: 'day_added_user',
                    width: 100,
                },
                {
                    name: 'online_user',
                    index: 'online_user',
                    width: 100,
                },
                {
                    name: 'start_room_num',
                    index: 'start_room_num',
                    width: 60,
                }, {
                    name: 'finish_room_num',
                    index: 'finish_room_num',
                    width: 60,
                },


                {
                    name: 'added_user_room_num',
                    index: 'added_user_room_num',
                    width: 100,
                },
                {
                    name: 'recharge_user',
                    index: 'recharge_user',
                    width: 100,
                },
                {
                    name: 'recharge_amount',
                    index: 'recharge_amount',
                    width: 100,
                },
                {
                    name: 'recharge_gold_amount',
                    index: 'recharge_gold_amount',
                    width: 100,
                },
                {
                    name: 'recharge_diamond_amount',
                    index: 'recharge_diamond_amount',
                    width: 100,
                },
                {
                    name: 'recharge_user_card_amount',
                    index: 'recharge_user_card_amount',
                    width: 100,
                },
                {
                    name: 'recharge_club_card_amount',
                    index: 'recharge_club_card_amount',
                    width: 100,
                },

            ],
            pager: "#pager_list_1",
            viewrecords: true,
            hidegrid: false,
            gridstate: 'hidden'
        });
    });
    $(document).ready(function() {
        $.jgrid.defaults.styleUI = 'Bootstrap';
        $("#table_list_2").jqGrid({
            // url:'__URL__/real_time_data',
            // postData:{},
            // datatype: "json",
            data: mydatas,
            datatype: "local",
            mtype: 'POST',
            height: 250,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [10, 25, 50, 100],
            colNames: ['区域','区域日活','区域开桌数','区域完成桌数','新增亲友圈数', '充值蓝钻消耗数','赠送蓝钻消耗数','会长买卡金额','会长买黄钻金额'],
            colModel: [
                {
                    name: 'area_name',
                    index: 'area_name',
                    width: 100,
                },
                {
                    name: 'day_active_user',
                    index: 'day_active_user',
                    width: 100,
                },
                {
                    name: 'start_room_num',
                    index: 'start_room_num',
                    width: 100,
                },
                {
                    name: 'finish_room_num',
                    index: 'finish_room_num',
                    width: 100,
                },
                {
                    name: 'added_club_num',
                    index: 'added_club_num',
                    width: 100,
                },
                {
                    name: 'reduce_pay_gold_num',
                    index: 'reduce_pay_gold_num',
                    width: 60,
                }, {
                    name: 'reduce_free_gold_num',
                    index: 'reduce_free_gold_num',
                    width: 60,
                },
                {
                    name: 'club_recharge_card_amount',
                    index: 'club_recharge_card_amount',
                    width: 100,
                },
                {
                    name: 'club_recharge_diamond_amount',
                    index: 'club_recharge_diamond_amount',
                    width: 100,
                },

            ],
            pager: "#pager_list_2",
            viewrecords: true,
            hidegrid: false,
            gridstate: 'hidden'
        });
        
    });
    $(document).ready(function() {
        $.jgrid.defaults.styleUI = 'Bootstrap';
        $("#table_list_3").jqGrid({
            // url:'__URL__/real_time_data',
            // postData:{},
            // datatype: "json",
            data: mydatas,
            datatype: "local",
            mtype: 'POST',
            height: 250,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [10, 25, 50, 100],
            colNames: ['玩法','玩法参与人数','玩法开桌数','玩法完成桌数','充值蓝钻消耗数','赠送蓝钻消耗数',"黄钻消耗数"],
            colModel: [

                {
                    name: 'play_name',
                    index: 'play_name',
                    width: 100,
                },
                {
                    name: 'valid_active_user',
                    index: 'valid_active_user',
                    width: 100,
                },
                {
                    name: 'start_room_num',
                    index: 'start_room_num',
                    width: 100,
                },
                {
                    name: 'finish_room_num',
                    index: 'finish_room_num',
                    width: 100,
                },
                {
                    name: 'reduce_pay_gold_num',
                    index: 'reduce_pay_gold_num',
                    width: 100,
                },
                {
                    name: 'reduce_free_gold_num',
                    index: 'reduce_free_gold_num',
                    width: 60,
                },
                {
                    name: 'reduce_diamond_num',
                    index: 'reduce_diamond_num',
                    width: 60,
                },


            ],
            pager: "#pager_list_3",
            viewrecords: true,
            hidegrid: false,
            gridstate: 'hidden'
        });

        
		setTimeout(function(){
            var width = $('.jqGrid_wrapper').width();
            $('#table_list_1').setGridWidth(width);
            $('#table_list_2').setGridWidth(width);
            $('#table_list_3').setGridWidth(width);
		},500);
        
        
    });
    laydate.render({
        elem: '#time1',
        type: 'month',
        format: 'yyyyMM'
    });
    laydate.render({
        elem: '#time2',
        type: 'month',
        format: 'yyyyMM'
    });
</script>

</body>

</html>